<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="animate.css"/>
	<style type="text/css">
		html{
			background-color: black;
		}
		#scene{
			width: 900px;
			height: 261px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin: 100px auto;
		}
		.elasticity{
			width: 105px;
			height: 261px;
			flex-grow: 1;
			overflow: hidden;
			transition: all 0.5s;
			border: 1px solid black;
		}
		.elasticity:hover{
			background-repeat:no-repeat;
			width: 510px;
		}
		.name{
			display: block;
			margin: 40%;
			align-items: center;
			font-size: 35px;
			color: white;
		}
		.elasticity:hover .name{
			display: none;
		}
	</style>
</head>
<body>
	<div id="scene">
		<div class="elasticity" style="background-image: url(img1.jpg);"><span class="name">温泉酒店</span></div>
		<div class="elasticity" style="background-image: url(img2.jpg);"><span class="name">情侣酒店</span></div>
		<div class="elasticity" style="background-image: url(img3.jpg);"><span class="name">设计酒店</span></div>
		<div class="elasticity" style="background-image: url(img4.jpg);"><span class="name">青年酒店</span></div>
		<div class="elasticity" style="background-image: url(img5.jpg);"><span class="name">特色酒店</span></div>
		<div class="elasticity" style="background-image: url(img6.jpg);"><span class="name">海山酒店</span></div>
		<div class="elasticity" style="background-image: url(img7.jpg);"><span class="name">海外酒店</span></div>
	</div>
</body>
</html>